<template>
  <div :class="classes">
    <div :class="barConClasses">
      <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Trigger',
    props: {
      mode: String
    },
    data () {
      return {
        prefix: 'ivu-split-trigger',
        initOffset: 0
      }
    },
    computed: {
      isVertical () {
        return this.mode === 'vertical'
      },
      classes () {
        return [
          this.prefix,
          this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
        ]
      },
      barConClasses () {
        return [
          `${this.prefix}-bar-con`,
          this.isVertical ? 'vertical' : 'horizontal'
        ]
      }
    }
  }
</script>

<style lang="less">
  @import './index.less';
</style>
